<template>
  <div>
    <div class="excelright" >

      <el-button type="primary">导入excel表
        <!-- 导入Excel -->
<el-upload
   action="/上传文件的接口"
   :on-change="onChange"
   :auto-upload="false"
   :show-file-list="false"
   accept=".xls, .xlsx" >
   <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button>
</el-upload>
      </el-button>
  



      <!-- 导出excel文件 -->
      <el-button type="primary">
        <download-excel
          type="primary"
          class="export-excel-wrapper"
          :data="json_data"
          :fields="json_fields"
          name="filename.xls"
        >
          导出excel表
        </download-excel>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props:{},
  data () {
    return {
           json_fields: {
        "工号": "jobnumber",    //常规字段
        "员工姓名（必填）": "name",   
        "手机号（必填）": "phone.mobile", //支持嵌套属性
        "部门": "department", //支持嵌套属性
        "职位": "post", //支持嵌套属性
        // "备用电话": {
        //   field: "phone.landline",
        //             //自定义回调函数
        //   callback: value => {
        //     return `Landline Phone - ${value}`;
        //   }
        // }
      },
      json_data: [
        {
          name: "魏佳",
          jobnumber: "2020001",
          post: "前端工程师",
          department: "开发部",
          phone: {
            mobile: "15701793476",
            landline: "13281357561"
          }
        },
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    }
  },
  components: {},
  methods: {
    handleSelectedFile (convertedData) {
      console.log(convertedData)
    },
    // 文件选择回调
 3     onChange(file, fileList) {
 4       console.log(fileList);
 5       this.fileData = file; // 保存当前选择文件
 6       this.readExcel(); // 调用读取数据的方法
 7     },
 8     // 读取数据
 9     readExcel(e) {
10       console.log(e);
11       let that = this;
12       const files = that.fileData;
13       console.log(files);
14       if (!files) {
15         //如果没有文件
16         return false;
17       } else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
18         this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
19         return false;
20       }
21       const fileReader = new FileReader();
22       fileReader.onload = ev => {
23         try {
24           const data = ev.target.result;
25           // console.log(data)
26           const workbook = this.XLSX.read(data, {
27             type: "binary"
28           });
29           console.log(workbook.SheetNames);
30           if (workbook.SheetNames.length >= 1) {
31             this.$message({
32               message: "导入数据表格成功",
33               showClose: true,
34               type: "success"
35             });
36           }
37           const wsname = workbook.SheetNames[0]; //取第一张表
38           const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
39           console.log(ws);
40           that.outputs = []; //清空接收数据
41           for (var i = 0; i < ws.length; i++) {
42             var sheetData = {
43               // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
44               id: ws[i]["id"],
45               stuNumber: ws[i]["学号"],
46               stuName: ws[i]["姓名"],
47               sex: ws[i]["性别"],
48               tel: ws[i]["电话"],
49               xueyuan: ws[i]["学院"],
50               banji: ws[i]["班级"],
51               lyNumber: ws[i]["楼宇号"],
52               sushe: ws[i]["宿舍号"]
53             };
54             that.studentlist.unshift(sheetData);
55           }
56           this.$refs.upload.value = "";
57         } catch (e) {
58           return false;
     };
      // 如果为原生 input 则应是 files[0]
       fileReader.readAsBinaryString(files.raw);
    },
  },
  mounted() {},
  computed: {},
  watch: {}
}
</script>

<style lang='scss' scoped>
.excelright{
  margin-left: 1000px;
}
</style>